<template>
	<view>
		<nav-bar title="首页" :showLeftIcon="false"></nav-bar>
		<!-- 搜索/选择时间 -->
		<view class="data-statistics">
			<view class="title">
				<text>数据统计</text>
			</view>
			<view>
				<view>
					<text>0</text>
					<text>新增订单数</text>
				</view>
				<view>
					<text>0</text>
					<text>已完成订单</text>
				</view>
			</view>
		</view>
		<view class="top">
			<view class="top-left">
				<!-- <uni-search-bar
          placeholder="搜商品名称、订单编号"
          bgColor="#EEEEEE"
          @confirm="search"
        /> -->
				<u-search placeholder="搜商品名称、订单编号" v-model="keyword" shape="round" :clearabled="true"
					:showAction="false" @search="search"></u-search>
			</view>
			<view class="top-right">
				<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="checkDate"
					@cancel="show = false"></u-datetime-picker>
				<view class="btn" @click="show = true">选择时间</view>
				<!-- <you-form
          ref="form"
          :showFormTitle="false"
          :formConfig="selectConfig"
          v-model="selectForm"
          @selectChange="selectChange"
        ></you-form> -->
			</view>
		</view>
		<you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem"></you-tabs>
		<you-scroll :loadingHeight="loadingHeight" :mainHeight="scrollHeight" :isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" @onRefresh="onRefresh" @loadMore="loadMore">
			<template>
				<view v-if="isLoading" class="common-loading">
					<image class="loading-img" :src="baseIconUrl + 'commonIcon/icon_loading.png'" />
					正在加载数据，请稍后......
				</view>
				<view class="common-no-data" v-else-if="!businessOrderList || businessOrderList.length === 0">
					<image class="no-data-img" :src="baseIconUrl + 'commonIcon/icon_no_data.png'" />
					<view class="text">暂无数据</view>
				</view>
				<view v-else>
					<businessOrder-list :businessOrderList="businessOrderList" @goShip="toShip"
						@toDelivered="toDelivered"></businessOrder-list>
				</view>
			</template>
		</you-scroll>
		<!-- 已送达弹窗 -->
		<u-popup  :show="showStatusPopup" @close="close" mode="center" :round="10" :closeable="true">
			<view class="column-start" style="width: 85vw;padding: 20rpx;">
				<view class="title1">温馨提示</view>
				<view class="content">请填写并上传送达信息</view>
				<view class="row statusPopup">
					<p class="p1">上传照片</p>
					<view style="width: 50%;">
						<uni-file-picker v-model="uploadImg" :limit="1"
							:imageStyles="imageStyles" @delete="clickDelete($event)"
							@select="uploadSelect($event)">
							<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
							<view class="desc">点击上传</view>
						</uni-file-picker>
					</view>
				</view>
				<view class="row statusPopup">
					<p class="p1">备注</p>
					<view style="width: 50%;">
						<u-textarea v-model="receiveRemark" placeholder="请输入备注" ></u-textarea>
					</view>
				</view>
				<button class="submitBtn" @click="submitOrder">提交</button>
			</view>
		</u-popup>
		<view class="tabBar">
			<view v-for="(item,index) in tabBerList" @click="clickPage(item.pagePath)"
				:style="{width:100 / tabBerList.length +'%'}">
				<image class="bar_img" v-if="tabBerActive===index" :src="item.selectedIconPath"></image>
				<image class="bar_img" :src="item.iconPath" v-else></image>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template> 

<script>
	import businessOrderList from '../components/businessOrderList.vue'
	import {
		getMiniprogramToken
	} from "@/utils/auth"
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: "SupplierOrder",
		components: {
			businessOrderList
		},
		data() {
			return {
				tabBerActive: 0,
				tabBerList: [{
						"pagePath": "/subPages/otherPages/businessOrder",
						"iconPath": "/static/images/tabBar/tab_home.png",
						"selectedIconPath": "/static/images/tabBar/tab_home_active.png",
						"text": "首页"
					},
					{
						"pagePath": "/subPages/otherPages/privatelyOwned",
						"iconPath": "/static/images/tabBar/tab_mine.png",
						"selectedIconPath": "/static/images/tabBar/tab_mine_active.png",
						"text": "个人中心"
					}
				],
				baseUrl,
				baseImgUrl,
				keyword: '',
				baseIconUrl,
				loadingHeight: '',
				scrollHeight: '',
				remark: '',
				isAllData: false,
				showStatusPopup: false,
				isRequestSuccess: false,
				isLoading: false,
				pageNum: 1,
				pageSize: 9999,
				total: 0,
				businessOrderList: [],
				tabActive: 0,
				tabsList: [{
						label: "全部",
						name: 0
					},
					{
						label: "待发货",
						name: 1
					},
					// {
					// 	label: "配送中",
					// 	name: 2
					// },
					{
						label: "待收货",
						name: 2
					},
					{
						label: "已完成",
						name: 4
					},
					{
						label: "已退单",
						name: 5
					},
				],
				show: false,
				createTime: '',
				pageNum: 1,
				pageSize: 10,
				value1: Number(new Date()),
				receiveRemark: '',
				uploadImg: [],
				receiveImgUrl: '',
				receiveId: '',
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "#D8DCE5",
						width: '2rpx',
						style: 'dashed',
						radius: '16rpx'
					}
				},
				// selectConfig: [
				//   {
				//     type: "select",
				//     label: "选择时间",
				//     key: "time",
				//     options: [
				//     ],
				//   },
				// ],
			};
		},

		onLoad(options) {
			this.scrollHeight = this.$store.getters.heightData.mainSearchHeight + 'px'
			this.loadingHeight = this.$store.getters.heightData.mainSearchHeight - 56 + 'px'
			this.pageNum = 1
			this.businessOrderList = []
			this.getBusinessOrderList()
		},
		onReady() {

		},
		methods: {
			clickPage(path) {
				uni.redirectTo({
					url: path
				});
			},
			async submitOrder() {
				
				const data = {
					id: this.receiveId,
					orderStatus: 4,
					receiveRemark: this.receiveRemark,
					receiveImgUrl: this.receiveImgUrl
				}
				console.log(data);
				const res = await this.$PUT('/fx/order', data)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: res.msg,
						duration: 2000
					})
					this.receiveRemark = ''
					this.receiveImgUrl = ''
					this.uploadImg = []
					this.receiveId = ''
					setTimeout(() => {
						this.showStatusPopup = false
						this.getBusinessOrderList()
					}, 2000)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '服务器内部错误'
					})
				}
			},
			async close() {
				this.receiveRemark = ''
				this.receiveImgUrl = ''
				this.receiveId = ''
				this.showStatusPopup = false
			},
			async checkDate(e) {
				console.log(e)
				let year = new Date(e.value).getFullYear();
				let month = ('0' + (new Date(e.value).getMonth() + 1)).slice(-2); // 月份补零  
				let day = ('0' + new Date(e.value).getDate()).slice(-2); // 日期补零 
				let date = `${year}-${month}-${day}`
				this.createTime = date
				this.show = false
				this.tabActive = 0
				this.pageNum = 1
				this.businessOrderList = []
				this.getBusinessOrderList()
			},
			async toShip(item) {
				console.log('toship')
				const data = {
					id: item.outTradeNo || item.id,
					orderStatus: 2
				}
				const res = await this.$PUT('/fx/order', data)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: res.msg,
						duration: 2000
					})
					setTimeout(() => {
						this.getBusinessOrderList()
					}, 2000)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '服务器内部错误'
					})
				}
			},
			//已送达
			async toDelivered(item) {
				console.log('toDelivered', item)
				uni.navigateTo({
					url: `/subPages/otherPages/components/deliveryOrder?id=${item.outTradeNo || item.id}`
				});
				// this.showStatusPopup = true
				// this.submitOrder(data)
				// this.submitOrder()
			},
			clickDelete(e) {
				console.log('选择图片', e)
			},
			// 已送达上传证明图片
			uploadSelect(e) {
				const tempFilePaths = e.tempFilePaths
				const tempFiles = e.tempFiles[0]
				uni.uploadFile({
					url: this.baseUrl + '/common/upload',
					// H5上传
					// file: tempFilePaths,
					// 微信小程序上传
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": 'Bearer ' + getMiniprogramToken()
					},
					// 成功函数
					success: (res) => {
						// 取到文档服务器的值
						let uploadData = JSON.parse(res.data)
						console.log('上传成功的图片', uploadData)
						this.receiveImgUrl = `${this.baseUrl}${uploadData.fileName}`
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error)
					}
				})
			},
			search(value) {
				console.log(value, '输入值')
			},
			async getBusinessOrderList() {
				const data = {
					time: this.createTime,
					searchValue: this.keyword,
					orderStatus: this.tabActive,
					// pageNum: this.pageNum,
					// pageSize: this.pageSize
				}
				const res = await this.$GET('/fx/order/list?userRole=3', data)
				if (res.code == 200) {
					console.log(res)
					this.businessOrderList = res.rows
				}

				this.isRequestSuccess = true
			},
			// 下拉刷新
			onRefresh() {
				this.pageNum = 1
				this.businessOrderList = []
				this.isAllData = false
				this.isRequestSuccess = false
				this.getBusinessOrderList()
			},
			// 上拉加载
			async loadMore() {
				const that = this
				// const data = {
				// 	createTime: this.createTime,
				// 	search: this.keyword,
				// 	orderStatus: this.tabActive,
				// 	pageNum: this.pageNum + 1,
				// 	pageSize: this.pageSize
				// }
				// const res = await that.$GET('/fx/order/listApp', data)
				// const res = await new Promise(async function(resolve, reject) {
				// 	setTimeout(async () => {
				// 		const res2 = await that.$GET('/fx/order/listApp', data)
				// 		resolve(res2)
				// 	}, 1000)
				// })
				// console.log(res)
				// if (res.code == 200) {
				// 	this.pageNum++
				// }
				console.log('触底')

				if (this.businessOrderList.length < this.total) {
					this.pageNum++
					this.isAllData = false
					this.isRequestSuccess = false
					this.getBusinessOrderList()
				} else {
					this.isAllData = true
				}
			},
			//切换tab
			clickTabItem(value) {
				this.tabActive = value;
				this.businessOrderList = []
				this.getBusinessOrderList()
			},
			//搜索
			search(res) {
				this.tabActive = 0
				this.pageNum = 1
				this.businessOrderList = []
				this.getBusinessOrderList()
				// uni.showToast({
				// 	title: "搜索：" + res.value,
				// 	icon: "none",
				// });
			},
			//选择时间change事件
			selectChange() {
				this.show = true
			},
		},
	};
</script>
<style lang="scss" scoped>
	.data-statistics {
		background-color: #fff;
		padding: 20upx;
		margin-bottom: 20upx;
	
		>view {
			display: flex;
			border-radius: 10upx;
			background: #e4f3f0;
			>view {
				padding: 20upx 0;
				width: 50%;
				text {
					text-align: center;
					display: block;
	
					&:nth-of-type(1) {
						font-size: 40upx;
						font-weight: 600;
					}
	
					&:nth-of-type(2) {
						font-size: 20upx;
						color: #aaa;
					}
				}
			}
		}
	
		.title {
			font-size: 26upx;
			margin-bottom: 10upx;
			background: #ffffff;
			font-weight: 600;
		}
	}
	.top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding-top: 10rpx;

		.btn {
			width: 220rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			border-radius: 34rpx;
			background: #F5F5F5;
			color: #999;
		}
	}
	.row {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}
	.title1 {
		font-size: 30rpx;
		font-weight: 600;
		width: 100%;
		text-align: center;
		margin: 10rpx 0;
	}
	.content {
		font-size: 30rpx;
		font-weight: 500;
		width: 80%;
		text-align: center;
		margin: 10rpx 0;
	}
	.submitBtn {
		padding: 12rpx 80rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #fff;
		background-color: #0b3f35;
		margin: 60rpx 0 20rpx 0;
	}
	.statusPopup {
		width: 100%;
		margin: 60rpx 0;
		.p1 {
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.tabBar {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		width: 100%;
		height: 120upx;
		background-color: #ffffff;
		display: flex;
	
		>view {
			text-align: center;
	
			>image {
				margin: 18upx auto 0;
				width: 55upx;
				height: 55upx;
			}
	
			text {
				font-size: 20upx;
				display: block;
			}
		}
	}
</style>